<template>
    <div id="app">
        <el-menu
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect">
            <!--                background-color="#545c64"-->
            <!--                text-color="#fff"-->
            <!--                active-text-color="#ffd04b">-->
            <el-menu-item index="3" style=" color: brown ; font-size: 16px">
                欢迎您！ <span style="font-size: 18px">{{userName}}</span>
                </el-menu-item>
            <div style="margin-left: 1100px; display: flex ;">
                <el-menu-item index="1" style=" color: brown ; font-size: 18px">登录</el-menu-item>
                <el-menu-item index="2" style=" color: brown ;font-size: 18px">注册</el-menu-item>
            </div>
        </el-menu>

        <el-container>
            <el-aside width="202px">
                <el-menu :default-openeds="['1']"
                         @select="menuFn">
                    <!--                        default-active="3"-->
                    <!--                        class="el-menu-vertical-demo"-->
                    <!--                        background-color="#545c64"-->
                    <!--                        text-color="#fff"-->
                    <!--                        active-text-color="#ffd04b">-->
                    <el-submenu index="1">
                        <template slot="title">
<!--                            <i class="el-icon-location"></i>-->
                            <span>商城后台系统</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">促销管理</el-menu-item>
                            <el-menu-item index="1-2">商品库存管理</el-menu-item>
                            <el-menu-item index="1-3">订单维护</el-menu-item>
                            <el-menu-item index="1-4">客户维护</el-menu-item>
                            <el-menu-item index="1-5">退货维护</el-menu-item>
                            <el-menu-item index="1-6">上架/下架</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </div>

</template>
<script>
    export default {
        name: 'App',
        data() {
            return {
                userName:'',
            };
        },
        mounted() {
            this.init('3')
        },
        methods: {
            init(index){
                if (index == '3'){
                    this.userName = this.$store.state.userName
                }
            },
            handleSelect(index) {
                this.init('3')
                if (index == '1') {
                    this.$router.push("LoginCom")
                } else if (index == '2') {
                    this.$router.push("registerView")
                }
            },
            menuFn(index) {
                this.init('3')
                console.log(this.userName)
                if (this.userName != '') {
                    if (index == '1-1') {
                        this.init('3')
                        this.$router.push("PromotionView")
                    } else if (index == '1-2') {
                        this.init('3')
                        this.$router.push("ShoppingStorage")
                    } else if (index == '1-3') {
                        this.init('3')
                        this.$router.push("OrderView")
                    } else if (index == '1-4') {
                        this.init('3')
                        this.$router.push("CustomerView")
                    } else if (index == '1-5') {
                        this.init('3')
                        this.$router.push("RetreatView")
                    } else if (index == '1-6') {
                        this.init('3')
                        this.$router.push("BatchView")
                    }
                }
                else {
                    this.$message({
                        type: 'info',
                        message: '请先登录，谢谢！'
                    });
                }

            },

        }
    }
</script>

<style scoped>

</style>